<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-container>
            <el-aside class="el-aside" width="200px" style="background-color: #19374b">
                <v-menu2/>
            </el-aside>
            <el-main class="elMain padding0">
                <el-row>
                    <el-col :span="24">
                        <el-breadcrumb separator=">" class="paddingLeft68">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>卖家中心</el-breadcrumb-item>
                            <el-breadcrumb-item>项目详情</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>
                <!-- 主信息 -->
                <div class="width1200 margin0auto marginTop53">
                    <el-row :gutter="20">
                        <el-col :span="18">
                            <el-row class="bgWhite">
                                <el-col :span="24" class="padding10">
                                    <el-row :gutter="20">
                                        <el-col :span="8">
                                            <div class="imgContains size257 border padding30a30">
                                                <img
                                                :src="getImgUrl(ruleForm.thumb)"
                                                >
                                            </div>
                                        </el-col>
                                        <el-col :span="16">
                                            <el-row class="boderBottom">
                                                <el-col
                                                    :span="22"
                                                    class="color666 fontSize20 lineHeight40"
                                                >{{ruleForm.name}}</el-col>
                                                <el-col :span="2" @click.native="toEdit">
                                                    <span class="iconfont iconshezhi fontSize28"></span>
                                                </el-col>
                                            </el-row>
                                            <el-row
                                                class="marginTop20 colorc1 fontSize12 lineHeight24"
                                            >
                                                <el-col :span="24">
                                                    <el-row>
                                                        <el-col :span="5" class="textRight">专业类型标签：</el-col>
                                                        <!-- <el-col :span="12">{{ruleForm.professionTags}}</el-col> -->
                                                         <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in ruleForm.professionTags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                                                        <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in ruleForm.professionTags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                                                        <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in ruleForm.professionTags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                                                    </el-row>
                                                </el-col>
                                                <el-col :span="24">
                                                    <el-row>
                                                        <el-col :span="5" class="textRight">项目地址：</el-col>
                                                        <el-col :span="12">{{ruleForm.projectAddressId}}</el-col>
                                                    </el-row>
                                                </el-col>
                                                <el-col :span="24">
                                                    <el-row>
                                                        <el-col :span="5" class="textRight">项目类型标签：</el-col>
                                                        <!-- <el-col :span="12">{{ruleForm.projectTags}}</el-col> -->
                                                        <el-tag size="mini" color="#6fbc85" class="colorWhite" v-for="(btnItem,index) in ruleForm.projectTags" v-show="btnItem" v-if="index==0" :key="btnItem">{{btnItem}}</el-tag>
                                                        <el-tag size="mini" color="#00c1de" class="colorWhite" v-for="(btnItem,index) in ruleForm.projectTags" v-show="btnItem" v-if="index==1" :key="btnItem">{{btnItem}}</el-tag>
                                                        <el-tag size="mini" color="#deb85e" class="colorWhite" v-for="(btnItem,index) in ruleForm.projectTags" v-show="btnItem" v-if="index==2" :key="btnItem">{{btnItem}}</el-tag>
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row class="bgWhite marginTop20">
                                <el-col :span="24" class="bgFd">
                                    <el-row class="lineHeight50">
                                        <el-col :span="20" :offset="1">{{ruleForm.name}}</el-col>
                                        <el-col :span="2" :offset="1">
                                            <span class="iconfont iconbianji"></span>&nbsp;&nbsp;
                                            <span class="iconfont iconshanchu"></span>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24" class="width100 height400 imgContains" v-html="ruleForm.content">
                                            {{ruleForm.content}}
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="6">
                            <div class="size330a283 bgWhite">
                                <el-row class="textCenter">
                                    <div
                                        class="size75 imgContains borderRadius50 margin0auto marginTop20"
                                    >
                                   
                                        <img  :src="getImgUrl(userArr.corpLogo)" alt="">
                                    </div>
                                </el-row>
                                <el-row class="textCenter">
                                    <el-col
                                        :span="24"
                                        class="fontSize16 color666 lineHeight40"
                                    >{{userArr.corpName}}</el-col>
                                    <!-- <el-col
                                        :span="24"
                                        class="colorc1 fontSize12 lineHeight28"
                                    >北京市 | {{userArr.corpName}}</el-col> -->
                                    <el-col
                                        :span="24"
                                        class="colorc1 fontSize12 lineHeight28"
                                    >工厂地址：{{userArr.corpLocation}}</el-col>
                                    <el-col
                                        :span="24"
                                        class="colorc1 fontSize12 lineHeight28"
                                    >联系电话：{{userArr.phone}}</el-col>
                                </el-row>
                            </div>
                              <div class="size330a283 marginTop20">
                                <el-row class="textCenter">
                                    <el-col :span="24" class="paddingLeft15 borderLeft">
                                        解决方案联系人
                                    </el-col>
                                </el-row>
                                <el-row class="textCenter">
                                    <el-col
                                        :span="24"
                                        class="fontSize16 color666 lineHeight40 bgWhite marginTop20"
                                    >
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="size60 borderRadius imgContains margin0auto verticalAlignSuper marginTop10">
                                                <img :src="getImgUrl(ruleForm.thumb)" alt="">
                                            </div>
                                        </el-col>
                                        <el-col :span="18">
                                            <el-row style="text-align:left">
                                                <el-col :span="24">{{userArr.name}}</el-col>
                                                <el-col :span="24">法案工程师</el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.el-breadcrumb {
  background: #ffffff;
  line-height: 50px;
}
.marginTop10{
    margin-top: 10px;
}
</style>
<script>
import VMenu2 from "../../layout/default/components/menu/supplierIndex";
import { serverBaseUrl } from "src/common/setting";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import getImgUrl from "src/common/setting";
export default {
  name: "SolutionManagement",
  data() {
    // 选取默认值在里面就可以了，比如：  select:"双皮奶"；
    //手机号码
    var checkWebsite = (rule, value, callback) => {
      let websiteReg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
      if (value === "") {
        callback(new Error("请输入网址"));
      } else if (websiteReg.test(value)) {
        callback();
      } else {
        callback(new Error("网址格式不正确，请带http://"));
      }
    };
    return {
      content: ``,
      a_content: "",
      editorOption: {},

      timeVal: "", //日期

      options: [
        {
          value: "1",
          label: "新建"
        },
        {
          value: "2",
          label: "待审核"
        },
        {
          value: "3",
          label: "未发布"
        },
        {
          value: "4",
          label: "已发布"
        }
      ],
      select: "",

      initStatus: "", //新增/编辑
      headTitle: "", //标题/服务设备
      dialogImageUrl: "",
      dialogVisible: false,
      thumb: "",
      ruleForm: [],//供应商信息
      userArr:[],//用户信息
      rules: {
        name: [
          { required: true, message: "案例名称不能为空", trigger: "blur" }
        ],
        projectAddressId: [{ trigger: "blur", validator: checkWebsite }]
      }
    };
  },
  components: {
    quillEditor,
    VMenu2
  },
  mounted() {
    this.initData();
    this.userInfo();
  },
  methods: {
      toEdit(){
          console.log(this.ruleForm.id);
          this.$router.push({
              'name':'EditPage',
              query:{
                  'id':this.ruleForm.id,
                  'tabStatus':this.$route.query.tabStatus,
              }
          })
      },
      async userInfo() {
        const { $api } = this;
          var useData = await $api.user.test();
          console.log( useData )
          if(useData.code==0){
            this.userArr = useData.data;
          }else{
            this.$message.error(useData.msg);
          }
      },
        getImgUrl(url){
      return this.utils.getImgUrl(url);
    },
    async initData() {
      const { $api } = this;
      var dataObj = {
        id: this.$route.query.id
      };
      const resData = await $api.user.apiCorpCasesDetail(dataObj);
      console.log(resData)
      if (resData.code == 0) {
        this.ruleForm = resData.data;
        let stateCode = resData.data.stateCode;
        if (stateCode == 1) {
          this.select = "新建";
        } else if (stateCode == 2) {
          this.select = "待审核";
        } else if (stateCode == 3) {
          this.select = "未发布";
        } else {
          this.select = "已发布";
        }
        // this.select = resData.data.stateCode;
        // console.log(resData);
      } else {
        this.$message.error(resData.msg);
      }
    },
    //点击提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   let professionTags=JSON.stringify( this.ruleForm.professionTags.split(',') );//注split可以用字符或字符串分割
          //   let projectTags=JSON.stringify( this.ruleForm.projectTags.split(',') );//注split可以用字符或字符串分割
          //   let professionTags2 = professionTags.replace(/\[|]/g,'').replace(/^\"|\"$/g,'')
          //   let projectTags2 = projectTags.replace(/\[|]/g,'').replace(/^\"|\"$/g,'')
          //   let dataObj = {
          //     'name':this.ruleForm.name,
          //     'professionTags':professionTags2,
          //     'projectTags':projectTags2,
          //     'projectAddressId':this.ruleForm.projectAddressId,
          //     'summary':this.ruleForm.summary,
          //     'thumb':this.thumb,
          //   }
          console.log(this.ruleForm);
          console.log("------------");
          // this.subFormData(this.ruleForm);
          // alert('submit!');
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //提交表单数据
    async subFormData(dataObj) {
      const { $api } = this;
      const resData = await $api.user.apiCorpCaseCu(dataObj);
      if (resData.code == 0) {
        if (resData.code == 0) {
          this.$message.success("编辑成功");
          this.$router.go(-1);
        } else {
          this.$message.error(resData.msg);
        }
      } else {
        this.$message.error(resData.msg);
        // location.reload();
      }
    },
    handleRemove(file, fileList) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadUrl() {
      return { serverBaseUrl }.serverBaseUrl + "/admin/upload";
    },
    //成功上传
    successUpload(response, file, fileList) {
      this.thumb = response.data;
    },
    //富文本
    onEditorReady(editor) {
      console.log(editor);
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/</g, "<");
      str = str.replace(/>/g, ">");
      return str;
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>
